import { ShoppingCartOutlined } from "@ant-design/icons";
import { Button } from "antd";
import axios from "axios";
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import AlterBox from "./AlterBox";
function Recommendation(this: any) {
    const [flag, setFlag] = useState(false);
    const [alterShow, setAlterShow] = useState<boolean>(false);
    const [addCarShow, setAddCarShow] = useState<boolean>(false);
    const [status, setStatus] = useState<number>(0);
    const [likeBox, setLikeBox] = useState<number>(0);
    const [inspir,setInspir]=useState<boolean>(false);
    const [id, setId] = useState<number>(0);
    let [timer, setTimer] = useState<any>(null);
    let [inpuValue, setInputValue] = useState<string>('');
    let [auName, setAuName] = useState<{ id: number, content: string, nickname: string }[]>([]);
    let [comments, setComments] = useState<{ id: number, 'count(*)': number }[]>([]);
    let [authorId, setAuthorId] = useState<{ id: number, supports: number, cover: string, title: string, descc: string }[]>([]);
    let [authorInfo, setauthorInfo] = useState<{ avatar: string, nickname: string, works: string, follow: number, id: number, uid: number }[]>([]);
    const navigate = useNavigate();
    function Tohome() {
        navigate({ pathname: '/home' });
    }
    
    const uid=sessionStorage.getItem('uid');

    function over() {
        clearTimeout(timer);
        setFlag(true)
    }
    function leaver() {
        timer = setTimeout(() => { setFlag(false) }, 500);
    }
    function uecb() {
        axios.get('http://127.0.0.1:81/atourInfo').then((res) => {
            setAuthorId(res.data.results0);
            setauthorInfo(res.data.results);
            // console.log(res);
        }).catch((error) => {
            console.log(error);
        })

    }
    async function getComment() {
        let a = await axios.get('http://127.0.0.1:81/getComment').then((res) => {
            return res.data
        }).catch((error) => {
            console.log(error);
        })
        setComments(a.results);
        setAuName(a.results1);
    }
    function send(id: number, content: string): any {
        //①清除input输入框的值
        setInputValue('');
        // ②修改弹出框的状态，显示评论成功或评论内容不能为空
        setAlterShow(true);
        setTimeout(() => { setAlterShow(false) }, 2000);
        // ③根据动态id，评论内容（inputValue）以及用户的uid（后端存储的）向comment数据表中添加数据
        if (content === '') {
            setStatus(-1);
            return;
        }
        axios.post('http://127.0.0.1:81/insertCom', { id: id, content: content,uid:uid }).then((res) => {
            if (res.status === 200) {
                setStatus(res.status);
            }
            console.log(res);
        }).catch((error) => {
            console.log(error);
        })
    }

    function like(id: number): any {
        axios.post('http://127.0.0.1:81/updataSup', { id: id ,uid:uid}).then((res) => {
            setLikeBox(res.data.code);
            setId(res.data.id); 
            // console.log(res);
        }).catch((error) => {
            console.log(error);
        })
        uecb()
    }
    function addCar(id: number){
        setAddCarShow(true);
        setTimeout(() => { setAddCarShow(false) }, 3000);
    }
    getComment();
    useEffect(uecb, []);
    return (
        <>
            <AlterBox alterShow={alterShow} status={status} addCarShow={addCarShow} inspir={inspir} setInspir={setInspir}/>
            {
                authorId.map((item => {
                    return (
                        <div className='dynamicBox' key={item.id}>
                            {
                                authorInfo.map((info) => {
                                    if (item.id === info.id) {
                                        return (
                                            <>
                                                <div className='author' key={info.uid}>
                                                    <div className="authorInfo">
                                                        <div className="avatar" onMouseEnter={over} onMouseLeave={leaver}>
                                                            <img src={`${info.avatar}`} alt="" onClick={Tohome} />
                                                        </div>
                                                        <span className="authorName" onMouseEnter={over} onMouseLeave={leaver}>{info.nickname}</span>
                                                        <div className="authorInfoShow" style={{ display: (flag === true ? 'block' : 'none') }} onMouseEnter={over} onMouseLeave={() => { setFlag(false) }}>
                                                            <div className="arrow"></div>
                                                            <div className="b1">
                                                                <div className="b1-author">
                                                                    <div className="b1-authotInfo">  <img src={`${info.avatar}`} alt="" />
                                                                        <div className="b1-authorName">
                                                                            <p style={{ color: '#000', fontWeight: 'bold' }}>{info.nickname}</p>
                                                                            <p style={{ color: '#B0B0AF', fontSize: '14px' }}>{info.follow}名追随者</p>
                                                                        </div>
                                                                    </div>
                                                                    <Button type="primary">
                                                                        关注
                                                                    </Button>
                                                                </div>
                                                                <div className="b1-img">
                                                                    <img src={`${info.works.split(' ')[0]}`} alt="" />
                                                                    <img src={`${info.works.split(' ')[2]}`} alt="" />
                                                                    <img src={`${info.works.split(' ')[4]}`} alt="" />
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <ul className="buttons-container">
                                                        <li className="like" onClick={() => { like(item.id) }} style={{ display: (likeBox == 0 ? 'flex' : 'none') }}>
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28">
                                                                <path fill="#F24C4C" fillRule="evenodd" d="M20.076 18.374c-2.187 2.214-4.693 4.429-5.653 5.273-.214.21-.48.316-.8.316-.267 0-.534-.105-.8-.316-2.507-2.215-8.533-7.752-9.387-9.966-1.226-3.217.214-6.908 3.307-8.226 2.4-1.002 5.12-.317 6.826 1.74 0 .053.107.053.107 0 1.707-2.057 4.48-2.742 6.826-1.74 3.094 1.318 4.587 5.01 3.307 8.226-.267.685-1.013 1.74-2.347 3.164" />
                                                            </svg>
                                                            <span style={{ marginLeft: '8px' }}>{item.supports}</span>
                                                        </li>
                                                        <li className="like" onClick={() => { like(item.id) }} style={{ display: (likeBox == 1 ? 'flex' : 'none'),backgroundColor:'#F24C4C' }}>
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28">
                                                                <path fill="#fff" fill-rule="evenodd" d="M20.076 18.374c-2.187 2.214-4.693 4.429-5.653 5.273-.214.21-.48.316-.8.316-.267 0-.534-.105-.8-.316-2.507-2.215-8.533-7.752-9.387-9.966-1.226-3.217.214-6.908 3.307-8.226 2.4-1.002 5.12-.317 6.826 1.74 0 .053.107.053.107 0 1.707-2.057 4.48-2.742 6.826-1.74 3.094 1.318 4.587 5.01 3.307 8.226-.267.685-1.013 1.74-2.347 3.164" />
                                                            </svg>
                                                            <span style={{ marginLeft: '8px',color:'white' }}>{item.supports}</span>
                                                        </li>
                                                        <li><ShoppingCartOutlined style={{ fontSize: '22px' }} onClick={()=>{addCar(item.id)}} /></li>
                                                        <li onClick={()=>{setInspir(true)}}>采集</li>
                                                        <li>更多</li>
                                                    </ul>
                                                </div>
                                                <div className='bgcImg'>
                                                    <img src={`${item.cover}`} alt="" />
                                                </div>
                                                <div className='dynamicDesc'>
                                                    <h3 className='dyTitle'>{item.title}</h3>
                                                    <p className='dyDesc'>{item.descc}</p>
                                                </div>
                                                <div className='commentBox'>
                                                    <div className="commentShow">
                                                        {
                                                            comments.map(com => {
                                                                if (com.id === item.id) {
                                                                    return (
                                                                        <p>查看全部{com["count(*)"]}条评论</p>
                                                                    )
                                                                }
                                                            })
                                                        }
                                                        {
                                                            auName.map(aucont => {
                                                                if (aucont.id === item.id) {
                                                                    return (
                                                                        <div className="commentInfo">
                                                                            <span>{aucont.nickname}:</span>
                                                                            <span>{aucont.content}</span>
                                                                        </div>
                                                                    )
                                                                }
                                                            })
                                                        }

                                                    </div>
                                                    <div className='dycomment'>
                                                        <input type="text" placeholder="随便写点儿啥" value={inpuValue} onChange={(e: any) => { setInputValue(e.target.value) }} />
                                                        <button className="sendComment" onClick={() => send(item.id, inpuValue)}>发送</button>
                                                    </div>
                                                </div>
                                            </>

                                        )
                                    }
                                })
                            }


                        </div>
                    )
                }))
            }
        </>
    )
}
export default Recommendation;